<template>
  <div class="hyydxq">
    <div class="page_title">
      <img src="@/assets/img/bz.png" alt="" style="opacity: 0" />
      <span>标准化养殖</span>
      <img alt="" />
      <!-- <img src="@/assets/img/bz.png" @click="addBiaozhun" alt="" /> -->
    </div>
    <div class="kong"></div>
    <div class="head">
      <img src="@/assets/img/user_bg.png" alt="" />
      <div class="text">
        <div class="info">
          <p>总存栏数</p>
          <span>{{ livestockNumber }}</span>
        </div>
        <div class="tiao"></div>
        <div class="info">
          <p>羊舍数量</p>
          <span>{{ houseNumber }}</span>
        </div>
      </div>
    </div>
    <div class="title">
      <div class="tiao"></div>
      <p>经营管理</p>
    </div>
    <div class="div2">
      <div class="sd_items">
        <div class="sd_item" v-for="item in navsList" :key="item.id" @click="goPage(item.url)">
          <img :src="item.img" alt="" />
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>

    <div class="title" style="padding-top: 0">
      <div class="tiao"></div>
      <p>养殖管理</p>
    </div>
    <div class="sheItems">
      <div class="sheItem" v-for="item in sheepHouseList" :key="item.id" @click="goHourse(item)">
        <div class="flex-between font-14 line-height-3">
          <div class="col-333333 font-bold-500 font-15 m-r-10">{{ item.houseName }}</div>
        </div>
        <div class="flex-between font-13 line-height-3">
          <div class="col-666666 m-r-10 line-text-out">养殖数量：{{ item.breedingQuantity }}</div>
        </div>
      </div>
    </div>

    <div style="height: 45px"></div>
  </div>
</template>

<script>
import { setValue, clearValue } from '@/utils/auth'

import { totalLiveStockNumber, numberOfCirclesPage } from '@/api/record'
export default {
  components: {},
  data() {
    return {
      sheepHouseList: [],
      livestockNumber: null, // 存栏量
      houseNumber: null, // 舍数量
      pages: {
        page: 1,
        perPage: 10
      },
      navsList: [
        { id: 1, name: '羊只档案', url: 'archives', img: require('@/assets/img/sd/y1.png') },
        { id: 2, name: '耳标管理', url: 'earManager', img: require('@/assets/img/sd/y2.png') },
        { id: 3, name: '羊奶销售', url: 'milkManagement', img: require('@/assets/img/sd/y5.png') },
        { id: 4, name: '羔羊培育统计', url: 'lambBreedingStatistics', img: require('@/assets/img/sd/tj.png') },
        { id: 5, name: '离场记录', url: 'leaveRecord', img: require('@/assets/img/a4.png') },
        { id: 6, name: '病死无害化处理记录', url: 'deadRecord', img: require('@/assets/img/sd/si.png') },
        { id: 7, name: '保险投保记录', url: 'insuranceRecords', img: require('@/assets/img/sd/y6.png') },
        { id: 8, name: '保险理赔记录', url: 'insuranceSettlement', img: require('@/assets/img/sd/pei.png') }
      ],
      // navsList: [
      //   { id: 1, name: '羊只档案', url: 'archives', img: require('@/assets/img/sd/y1.png') },
      //   { id: 2, name: '耳标管理', url: 'earManager', img: require('@/assets/img/sd/y2.png') },
      //   { id: 3, name: '消毒记录', url: 'disinfectionRecord', img: require('@/assets/img/sd/y3.png') },
      //   { id: 4, name: '产奶记录', url: 'milkRecord', img: require('@/assets/img/sd/y4.png') },
      //   { id: 5, name: '羊奶销售', url: 'milkManagement', img: require('@/assets/img/sd/y5.png') },
      //   { id: 6, name: '投保记录', url: 'insuranceRecords', img: require('@/assets/img/sd/y6.png') },
      //   { id: 7, name: '保险记录', url: 'insuranceRecords', img: require('@/assets/img/sd/y6.png') },
      //   { id: 8, name: '保险理赔记录', url: 'insuranceRecords', img: require('@/assets/img/sd/y6.png') }

      // ],
      isLastData: false // 是否还有数据
    }
  },
  created() {
    this.$bridge.register('refresh', data => {
      this.loadTotalNumber()
      this.loadHourseList()
    })
    this.loadTotalNumber()
    this.loadHourseList()
  },
  methods: {
    loadTotalNumber() {
      totalLiveStockNumber().then(res => {
        if (res.status === 0) {
          this.houseNumber = res.data.houseNumber
          this.livestockNumber = res.data.livestockNumber
        }
      })
    },
    loadHourseList() {
      numberOfCirclesPage(this.pages).then(res => {
        if (res.status === 0) {
          // this.sheepHouseList = this.sheepHouseList.concat(res.data.rows)
          this.sheepHouseList = res.data.rows
        }
      })
    },
    // 去舍详情
    goHourse(item) {
      console.log(item)
      setValue('fzmHourseId', item.id)
      setValue('fzmHourseName', item.houseName)
      // setValue('houseTypeCode', item.houseType.code)
      this.$bridge.call('sdManagementDetail')
    },
    // 查看羊只档案
    goSee() {
      this.$bridge.call('commonArchives')
    },

    goPage(url) {
      clearValue('fzmHourseId')
      clearValue('fzmSex')

      this.$bridge.call(url)
    },
    addBiaozhun() {
      this.$bridge.call('addBiaozhun')
    }
  }
}
</script>

<style lang="scss" scoped>
.sd_items {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .sd_item {
    width: 25%;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 52px;
      height: 52px;
      margin-bottom: 8px;
    }
    p {
      color: #1b1b1b;
      font-size: 13px;
      text-align: center;
    }
  }
  .sd_item:nth-of-type(4) {
    margin-right: 0;
  }
}
.kong {
  height: 44px;
}
.page_title {
  width: 100%;
  height: 44px;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #37b5b5;
  padding: 0 10px;
  box-sizing: border-box;
  z-index: 9999;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  span {
    font-size: 18px;
    color: #fff;
  }
  img {
    // width: 20px;
    // height: 20px;
  }
}
.title {
  padding: 14px 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: #f7f7f7;
  .tiao {
    width: 4px;
    height: 14px;
    background-color: #00b8b6;
    margin-right: 11px;
    border-radius: 1px;
  }
  p {
    font-size: 16px;
    color: #333333;
  }
}
.div2 {
  // width: 90%;
  margin: 0 auto;

  // div {
  //   width: 108px;
  //   height: 80px;
  //   border-radius: 4px;
  //   background-color: #ecfafa;
  //   text-align: center;
  //   line-height: 80px;
  //   color: #00b8b6;
  //   font-size: 16px;
  //   margin-bottom: 10px;
  // }
}
.sheItems {
  margin-top: 12px;
  .sheItem {
    width: 357px;
    margin: 0 auto;
    padding: 14px 15px;
    margin-bottom: 10px;
    box-sizing: border-box;
    height: 92px;
    background: url(~@/assets/img/sd/bg1.png) no-repeat;
    background-size: 100% 100%;
  }
  .sheItem:first-child {
    background: url(~@/assets/img/sd/bg1.png) no-repeat;
    background-size: 100% 100%;
  }
  .sheItem:nth-child(2) {
    background: url(~@/assets/img/sd/bg2.png) no-repeat;
    background-size: 100% 100%;
  }
  .sheItem:nth-child(3) {
    background: url(~@/assets/img/sd/bg3.png) no-repeat;
    background-size: 100% 100%;
  }
  .sheItem:nth-child(4) {
    background: url(~@/assets/img/sd/bg4.png) no-repeat;
    background-size: 100% 100%;
  }
  .sheItem:nth-child(5) {
    background: url(~@/assets/img/sd/bg5.png) no-repeat;
    background-size: 100% 100%;
  }
  .sheItem:nth-child(6) {
    background: url(~@/assets/img/sd/bg6.png) no-repeat;
    background-size: 100% 100%;
  }
  .sheItem:nth-child(7) {
    background: url(~@/assets/img/sd/bg7.png) no-repeat;
    background-size: 100% 100%;
  }
  .sheItem:nth-child(8) {
    background: url(~@/assets/img/sd/bg8.png) no-repeat;
    background-size: 100% 100%;
  }
  .sheItem:nth-child(9) {
    background: url(~@/assets/img/sd/bg9.png) no-repeat;
    background-size: 100% 100%;
  }
}

.approvalItem.on {
  margin-top: 0;
}
.head {
  width: 100%;
  height: 100px;
  position: relative;
  padding: 24px 0 18px 0;
  box-sizing: border-box;

  img {
    width: 100%;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }
  .text {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 30px;
    box-sizing: border-box;
    .info {
      min-width: 60px;
      color: #fff;
      p {
        margin-bottom: 6px;
        text-align: center;
        font-size: 15px;
      }
      span {
        text-align: center;
        font-size: 20px;
        width: 60px;
        display: block;
      }
    }
    .tiao {
      width: 1px;
      height: 20px;
      background-color: rgba(255, 255, 255, 0.5);
    }
  }
  .btn {
    border: 1px solid #fff;
    border-radius: 25px;
    height: 26px;
    line-height: 26px;
    width: 115px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    margin: 0 auto;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.1);
  }
}
</style>
